<template>
	<view class="video">
		
		<view class="video-item">
			<video id="myVideo" :loop="true"
			src="https://s3.bytecdn.cn/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4"
			 @error="videoErrorCallback" :controls="false">
				 <cover-view class="toolbox">
					<cover-view class="playmain" @tap="play">
						<cover-image class="play" src="../../../../static/video/play.png" v-if="!isplay" lazy-load='true'></cover-image>
					</cover-view>
					<cover-view :style="style">
						 <cover-view class="action" @tap="BackPage" style="height: 100%;margin-left: 15px;align-items:center;">
						 	<cover-image :style="[{'margin':(CustomBar2/2-9) + 'px 0'}]" src="../../../../static/back.png" style="height: 36upx;width: 36upx;"  lazy-load='true'/>
						 </cover-view>
					</cover-view>
					<cover-view class="bottom">
						<cover-view class="bottom-main">
							<cover-view class="margin-bottom-sm">
								<cover-view class="margin-bottom cu-avatar-box">
									<cover-view class="uni-flex margin-bottom-sm">
										<cover-image class="cu-avatar lg round margin-right" :src="bgurl"></cover-image>
										<cover-view style="flex: 1;">
											<cover-view class="cu-avatar-name">李茜茜</cover-view>
											<cover-view class="cu-avatar-num">个人  13228586565</cover-view>
										</cover-view>
									</cover-view>
								</cover-view>
								<cover-view class="bottom-title margin-bottom">吉大海湾花园85平方米3房南向精装3楼住宅吉大海湾花园85平方米3房南向精装3楼住宅</cover-view>
								<cover-view class="bottom-msg">100万 3房2厅2卫 100.00㎡ 东南向 6层</cover-view>
							</cover-view>
						</cover-view>
						<cover-view class="bottom-tool">
							<cover-view class="margin-bottom-sm">
								<cover-image src="../../../../static/video/icon3.png" style="height: 50upx;width: 50upx;display: inline-block;"  lazy-load='true'/>
								<cover-view class="margin-top-sm">私信</cover-view>
							</cover-view>
							<cover-view class="margin-bottom-sm">
								<cover-image src="../../../../static/video/icon2.png" style="height: 50upx;width: 50upx;display: inline-block;"  lazy-load='true'/>
								<cover-view class="margin-top-sm">约看</cover-view>
							</cover-view>
							<cover-view class="margin-bottom-sm">
								<cover-image src="../../../../static/video/icon1.png" style="height: 50upx;width: 50upx;display: inline-block;"  lazy-load='true'/>
								<cover-view class="margin-top-sm">分享</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				 </cover-view>
			 </video>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				CustomBar2: this.CustomBar,
				title: 'video',
				src: '',
				isplay:false,
				bgurl:""
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo');
			this.play();
			this.bgurl = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg';
			// #endif
			// #ifdef MP-WEIXIN
			this.CustomBar2 = this.CustomBar/2;
			//#endif
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;box-sizing:border-box;position: absolute;`;
				return style
			}
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			play(){
				if(!this.isplay){
					console.info("播放");
					this.videoContext.play();
					this.isplay = true;
				}else{
					console.info("暂停");
					this.videoContext.pause();
					this.isplay = false;
				}
			}
		}
	}
</script>

<style lang="less">
	.video {
		width: 100%;
		height: 100%;
	}
	.video-item{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
		video{
			width: 100%;
			height: 100%;
		}
	}
	.toolbox{
		position: fixed;
		top: 0;
		color: #ffffff;
		z-index: 2;
		width: 100%;
		height: 100%
	}
	.playmain{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		.play{
			width: 300upx;
			height: 300upx;
			position: absolute;
			top: 50%;
			margin-top: -150upx;
			left: 50%;
			margin-left: -150upx;
		}
	}
	.bottom{
		position: absolute;
		bottom: 50upx;
		width: 100%;
		display: flex;
		.bottom-main{
			flex: 1;
			text-align: justify;
			padding: 0 50upx;
			box-sizing: border-box;
			display: flex; 
			justify-content: center;
			align-items: flex-end;
			.bottom-title{
				font-size: 32upx;
				word-break: break-all;
				white-space: pre-line;
			}
			.bottom-msg{
				font-size: 28upx;
				word-break: break-all;
				white-space: pre-line;
			}
		}
		.bottom-tool{
			width: 100upx;
			text-align: center;
		}
	}
	.cu-avatar-box{
		.cu-avatar-name{
			font-size: 32upx;
			color: #ffffff;
			line-height: 48upx;
		}
		.cu-avatar-num{
			font-size: 28upx;
			color: #ffffff;
			line-height: 48upx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			.margin-right-sm{
				line-height: 48upx;
			}
		}
	}
</style>
